<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
/*
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
*/
    transition: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;

    /*一旦按下，将过渡效果去除 松开后，还原初始状态过程中看到过渡效果回退*/
    transition: 0s;
}
</style>
</head>
<body>

<h2>按钮动画 - 波纹效果</h2>

<button class="button">Click Me</button>

</body>
</html>
